<template>
  <view class="page-wrapper">
    <view class="content">
      <view class="list-item">
        <view class="item-label">
          物品名称:
        </view>
        <view class="item-content">
          {{detail.wasteName}}
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          物品数量:
        </view>
        <view class="item-content">
          {{detail.wasteNumber}}
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          上门时间:
        </view>
        <view class="item-content">
          {{moment(detail.homeVisitTime).format("YY/MM/DD HH:mm")}}
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          上报时间:
        </view>
        <view class="item-content">
          {{moment(detail.createTime).format("YY/MM/DD HH:mm:ss")}}
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          物品图片:
        </view>
        <view class="item-content">
          <view class="img-wrapper" v-if="detail.pathList">
            <image class="img" v-for="(item, index) in detail.pathList" :key="index" :src="`${imgPrefix}${item}`"
              @click="previewImage(detail.pathList)">
            </image>
          </view>
        </view>
      </view>
      <view class="list-item">
        <view class="item-label">
          情况说明:
        </view>
        <view class="item-content">
          {{detail.wasteMemo}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getWasteRecyclingRecordDetails
  } from '../../api/api'
  import moment from '@/utils/moment.js'
  import {
    getOptionsParams,
    pvwImage
  } from '@/utils/util.js'

  export default {
    data() {
      return {
        imgPrefix: uni.getStorageSync("imgPrefix"),
        detail: {},
        routerParams: {}
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.getDetail()
    },
    methods: {
      pvwImage,
      moment,
      getDetail() {
        getWasteRecyclingRecordDetails({
          id: this.routerParams.id
        }).then((res) => {
          if (res.code == 200) {
            this.detail = res.result;
          }
        });
      },
      previewImage(imgUrl) {
        uni.previewImage({
          urls: imgUrl.map((item) => {
            return `${this.imgPrefix}${item}`
          })
        })
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .page-wrapper {
    padding: 16rpx;

    .content {
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin: 0 auto;
      padding: 25rpx 33rpx;

      .car {
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
        line-height: 40rpx;
        margin-bottom: 16rpx;
      }

      .list-item {
        margin-bottom: 16rpx;
        display: flex;

        .item-label {
          font-weight: 500;
          font-size: 26rpx;
          color: #999999;
          flex-shrink: 0;
          margin-right: 7rpx;
        }

        .item-content {
          font-weight: bold;
          font-size: 28rpx;
          color: #545454;
        }

        .img-wrapper {
          margin-top: 20rpx;
        }
      }

      .img-wrapper {
        .img {
          width: 160rpx;
          height: 142rpx;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-right: 18rpx;

          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }
</style>